<template>
  <a-config-provider :theme="app.themeConfig" :prefixCls="prefixCls" :locale="getAntdLocale">
    <AppProvider>
      <Layout>
      <div>
          <a-select v-model:value="app.themeName" style="width: 240px">
              <a-select-option v-for="(color, name) in variables" :value="name">{{ name }}:{{ color }}</a-select-option>
          </a-select>
          <a-select v-model:value="app.darkMode" style="width: 120px">
              <a-select-option value="dark">dark</a-select-option>
              <a-select-option value="light">light</a-select-option>
          </a-select>
          <a-button-group>
              <a-button type="primary">切换主题- {{ app.themeName }}</a-button>
              <a-button @click="app.toggleDarkMode">切换模式{{ app.darkModeComp }}</a-button>
          </a-button-group>
          <AppDarkModeToggle class="enter-x mr-2"></AppDarkModeToggle>
          <AppLocalePicker></AppLocalePicker>
      </div>
      <a-space wrap>
          <a-button type="primary" :icon="h(SearchOutlined)">Primary Button</a-button>
          <a-button type="primary" shape="circle">
              <template #icon><SearchOutlined /></template>
          </a-button>
          <a-button>Default Button</a-button>
          <a-button type="dashed">Dashed Button</a-button>
          <a-button type="text">Text Button</a-button>
          <a-button type="link">Link Button</a-button>
      </a-space>
      <h4 style="margin: '16px 0'"></h4>
      <div class="test">getColor</div>
      <h4 style="margin-bottom: 16px">Presets:</h4>
<div>
  <a-tag color="pink">pink</a-tag>
  <a-tag color="red">red</a-tag>
  <a-tag color="orange">orange</a-tag>
  <a-tag color="green">green</a-tag>
  <a-tag color="cyan">cyan</a-tag>
  <a-tag color="blue">blue</a-tag>
  <a-tag color="purple">purple</a-tag>
</div>
<h4 style="margin: '16px 0'">Custom:</h4>
<div>
  <a-tag color="#f50">#f50</a-tag>
  <a-tag color="#2db7f5">#2db7f5</a-tag>
  <a-tag color="#87d068">#87d068</a-tag>
  <a-tag color="#108ee9">#108ee9</a-tag>
</div>

<div>
  <a-pagination
  size="small"
    v-model:current="current1"
    v-model:page-size="pageSize1"
    :total="85"
    :show-total="total => `Total ${total} items`"
  />
  <br />
  <a-pagination
    v-model:current="current2"
    v-model:page-size="pageSize2"
    :total="85"
    :show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
  />
</div>
</Layout>
</AppProvider>
  </a-config-provider>
</template>
<script setup lang="ts">
import { defineComponent,h, ref } from 'vue'
import { AppDarkModeToggle } from '/@/components/Application';
import { AppLocalePicker } from '/@/components/Application';
import { AppProvider } from '/@/components/Application';
import { useAppStore } from '/@/store/modules/app'
import variables from '/@/styles/variables.module.scss'
import { SearchOutlined } from '@ant-design/icons-vue'
import { legacyLogicalPropertiesTransformer } from 'ant-design-vue'

// import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';

// import LayoutFeatures from '/@/layouts/default/feature/index.vue'
import Layout from '/@/layouts/default/index.vue'

import { useLocale } from '/@/locales/useLocale';
import 'dayjs/locale/zh-cn';
import 'dayjs/locale/zh-tw';
// support Multi-language
const { getAntdLocale } = useLocale();

// 阻止火狐浏览器在拖动时打开新窗口
document.body.ondrop = function (event) {
  event.preventDefault();
  event.stopPropagation();
};

const dark = window.localStorage.getItem('__APP__DARK__MODE__');
const app = useAppStore()
app.setDarkMode(dark || 'light')


const prefixCls = ref('ant')
const current1 = ref<number>(1);
const current2 = ref<number>(2);
const pageSize1 = ref<number>(20);
const pageSize2 = ref<number>(20);



</script>
<style lang="scss" scoped>
// @import '/@/styles/variables.module';

.test {
  @include useTheme {
      background: getColor('primary');
      color: getModeVar('infoColor');
  }
}
</style>
